<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a {text-decoration: none;}
        #box {margin: 0 auto;width: 1050px;}
        table {border-collapse: collapse;border: 1px solid #000;width: 1050px;text-align: center;}
        td {border: 1px solid #000;}
        tbody tr {height: 54px;}
        /*最后合并的那两行*/
        tfoot td:nth-child(1) a {color: orangered;}
        tfoot td:nth-child(2) {text-align: right;height: 46px;}
        /*编辑和删除按钮*/
        .editbtn {color: #333;}
        .removebtn {color: red;}
        /*初始状态的确定和取消按钮，*/
        .okbtn {color: #333;display: none;}
        .cancebtn {color: red; display: none;}
        /*初始状态的input框*/
        input[type='text'] {display: none;}
        /*加了ac后的tr，点击编辑按钮后，编辑和删除隐藏。确定和取消按钮显示*/
        .ac .okbtn,.ac .cancebtn {display: inline;}
        .ac .editbtn,.ac .removebtn {display: none;}
        .ac input[type='text'] {display: inline-block;}
        .ac span {display: none;}
    </style>

    <script>
        window.onload = function(){
            document.querySelector('tbody').onclick = function(e){
                e = e||event
                var target = e.target||e.srcElement
                //编辑按钮
                if(target.className === 'editbtn'){
                    var tr = target.parentNode.parentNode
                    tr.classList.add('ac')
                    var spans = tr.querySelectorAll('span')
                    Array.from(spans).forEach((span) => {
                        span.nextElementSibling.value = span.innerHTML
                    })
                }
                //确定按钮
                else if(target.className === 'okbtn'){
                    var tr = target.parentNode.parentNode
                    tr.classList.remove('ac')
                    var spans = tr.querySelectorAll('span')
                    Array.from(spans).forEach((span) =>{
                        span.innerHTML = span.nextElementSibling.value
                    })
                }
                //取消按钮
                else if(target.className === 'cancebtn'){
                    var tr = target.parentNode.parentNode
                    tr.classList.remove('ac')
                }
                //删除按钮
                else if(target.className === 'removebtn'){
                    var tr = target.parentNode.parentNode
                    if(confirm('删除操作不可逆，你确定要删除吗?')){
                        tr.remove()
                    }
                }
            }
            var n = 0; //计算被选中个数,将n声明在外面
            //全选框按钮不在tbody中，所以需要给table重新绑定委托事件
            document.querySelector('table').onchange = function(e){
                e = e||event
                var target = e.target||e.srcElement
                var check = document.querySelectorAll('.check')
                var allbox = document.querySelector('.allbox') 
                if(target.className === 'allbox'){
                    for(var i = 0;i < check.length;i++){
                        check[i].checked = allbox.checked
                        fn()
                    }
                    n = this.checked?checks.length:0;
                }else if(target.className === 'check'){
                        target.checked?n++ : n--
                        allbox.checked = n === check.length
                        fn()
                }
                 
            }//这个符号是onchange的结束标签
            //给tfoot绑定点击事件
            document.querySelector('tfoot').onclick = function(e){
                var zengjia = document.querySelector('.zengjia')
                console.log(zengjia)
                e = e||event
                var  target = e.target||e.srcElement
                if(target.className === 'zengjia'){
                    var tbody = document.querySelector('tbody')
                    tbody.appendChild(tbody.children[0].cloneNode(true))
                    }
                }  
            //计算价钱的函数
            function fn(){
                var check = document.querySelectorAll('.check')
                var num = 0 //总价钱
                Array.from(check).forEach((check) => {
                    if(check.checked){
                        var tr = check.parentNode.parentNode
                        var price = parseInt(tr.children[2].children[0].innerHTML)
                        var number = parseInt(tr.children[3].children[0].innerHTML)
                        num += price*number
                    }
                })
                var moneys = document.querySelector('#money')
                moneys.innerHTML = num
            } 
        }
    </script>

</head>
<body>
    <div id='box'>
        <table>
            <thead>
                <tr>
                    <td><input type="checkbox" id='allcheckbox' class='allbox'></td>
                    <td>球员</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>编辑</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" class='check'></td>
                    <td><span>詹姆斯</span><input type="text"></td>
                    <td><span class='ac'>3500</span><input type="text"></td>
                    <td><span>5</span><input type="text"></td>
                    <td>
                        <a href="javascript:;" class='editbtn'>编辑</a>
                        <a href="javascript:;" class='removebtn'>删除</a>
                        <a href="javascript:;" class='okbtn'>确定</a>
                        <a href="javascript:;" class='cancebtn'>取消</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class='check'></td>
                    <td><span>韦德</span><input type="text"></td>
                    <td><span>3000</span><input type="text"></td>
                    <td><span>1</span><input type="text"></td>
                    <td>
                        <a href="javascript:;" class='editbtn'>编辑</a>
                        <a href="javascript:;" class='removebtn'>删除</a>
                        <a href="javascript:;" class='okbtn'>确定</a>
                        <a href="javascript:;" class='cancebtn'>取消</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class='check'></td>
                    <td><span>科比</span><input type="text"></td>
                    <td><span>3300</span><input type="text"></td>
                    <td><span>2</span><input type="text"></td>
                    <td>
                        <a href="javascript:;" class='editbtn'>编辑</a>
                        <a href="javascript:;" class='removebtn'>删除</a>
                        <a href="javascript:;" class='okbtn'>确定</a>
                        <a href="javascript:;" class='cancebtn'>取消</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class='check'></td>
                    <td><span>乔丹</span><input type="text"></td>
                    <td><span>1000</span><input type="text"></td>
                    <td><span>1</span><input type="text"></td>
                    <td>
                        <a href="javascript:;" class='editbtn'>编辑</a>
                        <a href="javascript:;" class='removebtn'>删除</a>
                        <a href="javascript:;" class='okbtn'>确定</a>
                        <a href="javascript:;" class='cancebtn'>取消</a>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <td><a href="javascript:;" id='zengjia' class='zengjia'>增加球员</a></td>
                <td colspan="6" id='tfoot'>总价$:<b id='money'>0</b></td>
            </tfoot>
        </table>
    </div>

</body>
</html>